ແນະນຳ
ເລີ່ມຕົ້ນດ້ວຍ Bootstrap, ກອບທີ່ນິຍົມທີ່ສຸດໃນໂລກສໍາລັບການສ້າງເວັບໄຊທ໌ທີ່ຕອບສະຫນອງ, ມືຖືທໍາອິດ, ດ້ວຍ jsDelivr ແລະຫນ້າເລີ່ມຕົ້ນຂອງແມ່ແບບ.
ເລີ່ມໄວ
ຊອກຫາການເພີ່ມ Bootstrap ໃນໂຄງການຂອງທ່ານຢ່າງໄວວາບໍ? ໃຊ້ jsDelivr, CDN ແຫຼ່ງເປີດຟຣີ. ໃຊ້ຕົວຈັດການຊຸດຫຼືຕ້ອງການດາວໂຫລດໄຟລ໌ແຫຼ່ງ? ໄປທີ່ໜ້າດາວໂຫຼດ .
CSS
ສຳເນົາແຜ່ນສະໄຕລ໌ <link>
ໃສ່ໃນຂອງເຈົ້າ <head>
ກ່ອນສະໄຕຊີດອື່ນໆທັງໝົດເພື່ອໂຫລດ CSS ຂອງພວກເຮົາ.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
ຈສ
ຫຼາຍໆອົງປະກອບຂອງພວກເຮົາຕ້ອງການໃຊ້ JavaScript ເພື່ອເຮັດວຽກ. ໂດຍສະເພາະ, ພວກເຂົາຕ້ອງການ plugins JavaScript ຂອງພວກເຮົາເອງແລະ Popper . ວາງ ອັນໃດອັນໜຶ່ງຕໍ່ໄປນີ້ <script>
ຢູ່ ໃກ້ທ້າຍໜ້າຂອງເຈົ້າ, ຕໍ່ໜ້າ </body>
ປ້າຍປິດ, ເພື່ອເປີດໃຊ້ງານພວກມັນ.
ມັດ
ລວມເອົາທຸກໆ plugin Bootstrap JavaScript ແລະການຂຶ້ນກັບຫນຶ່ງຂອງສອງຊຸດຂອງພວກເຮົາ. ທັງສອງ bootstrap.bundle.js
ແລະ bootstrap.bundle.min.js
ລວມເອົາ Popper ສໍາລັບຄໍາແນະນໍາແລະ popovers ຂອງພວກເຮົາ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບສິ່ງທີ່ຢູ່ໃນ Bootstrap, ກະລຸນາເບິ່ງ ພາກ ເນື້ອ ໃນຂອງພວກເຮົາ .
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
ແຍກຕ່າງຫາກ
ຖ້າທ່ານຕັດສິນໃຈໄປກັບການແກ້ໄຂສະຄິບແຍກຕ່າງຫາກ, Popper ຕ້ອງມາກ່ອນ (ຖ້າທ່ານໃຊ້ຄໍາແນະນໍາຫຼື popovers), ແລະຫຼັງຈາກນັ້ນ plugins JavaScript ຂອງພວກເຮົາ.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
ໂມດູນ
ຖ້າທ່ານໃຊ້ <script type="module">
, ກະລຸນາອ້າງອີງເຖິງການ ໃຊ້ Bootstrap ຂອງພວກເຮົາເປັນສ່ວນໂມດູນ .
ອົງປະກອບ
ສົງໄສວ່າອົງປະກອບໃດຕ້ອງການ JavaScript ແລະ Popper ຂອງພວກເຮົາຢ່າງຈະແຈ້ງ? ຄລິກທີ່ລິ້ງອົງປະກອບການສະແດງຂ້າງລຸ່ມນີ້. ຖ້າເຈົ້າບໍ່ແນ່ໃຈກ່ຽວກັບໂຄງສ້າງໜ້າທົ່ວໄປ, ໃຫ້ອ່ານຕົວຢ່າງໜ້າແບບ.
ສະແດງອົງປະກອບທີ່ຕ້ອງການ JavaScript
- ແຈ້ງເຕືອນສໍາລັບການປິດ
- ປຸ່ມສຳລັບການສະຫຼັບລັດ ແລະກ່ອງໝາຍ/ການທຳງານວິທະຍຸ
- Carousel ສໍາລັບທຸກພຶດຕິກໍາ, ການຄວບຄຸມ, ແລະຕົວຊີ້ວັດ slides
- ຫຍໍ້ລົງເພື່ອສະຫຼັບການເບິ່ງເຫັນເນື້ອຫາ
- Dropdowns ສໍາລັບການສະແດງແລະຕໍາແຫນ່ງ (ຍັງຕ້ອງການ Popper )
- Modals ສໍາລັບການສະແດງ, ຕໍາແຫນ່ງ, ແລະພຶດຕິກໍາການເລື່ອນ
- Navbar ສໍາລັບການຂະຫຍາຍ plugin Collapse ຂອງພວກເຮົາເພື່ອປະຕິບັດພຶດຕິກໍາການຕອບສະຫນອງ
- Offcanvases ສໍາລັບການສະແດງ, ການຈັດຕໍາແຫນ່ງ, ແລະພຶດຕິກໍາການເລື່ອນ
- Toasts ສໍາລັບການສະແດງແລະການປິດ
- ຄໍາແນະນໍາແລະ popovers ສໍາລັບການສະແດງແລະຕໍາແຫນ່ງ (ຍັງຕ້ອງການ Popper )
- Scrollspy ສໍາລັບພຶດຕິກໍາການເລື່ອນແລະການປັບປຸງການນໍາທາງ
ແມ່ແບບເລີ່ມຕົ້ນ
ໃຫ້ແນ່ໃຈວ່າຫນ້າເວັບຂອງທ່ານຖືກຕັ້ງຄ່າດ້ວຍມາດຕະຖານການອອກແບບແລະການພັດທະນາຫລ້າສຸດ. ນັ້ນຫມາຍຄວາມວ່າການໃຊ້ HTML5 doctype ແລະລວມທັງແທັກ meta viewport ສໍາລັບພຶດຕິກໍາການຕອບສະຫນອງທີ່ເຫມາະສົມ. ເອົາມັນທັງຫມົດເຂົ້າກັນແລະຫນ້າຂອງທ່ານຄວນຈະເປັນແບບນີ້:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
ສໍາລັບຂັ້ນຕອນຕໍ່ໄປ, ເຂົ້າໄປເບິ່ງ ເອກະສານ Layout ຫຼື ຕົວຢ່າງທີ່ເປັນທາງການຂອງພວກເຮົາ ເພື່ອເລີ່ມຈັດວາງເນື້ອຫາ ແລະອົງປະກອບຂອງເວັບໄຊຂອງເຈົ້າ.
ທີ່ສໍາຄັນທົ່ວໂລກ
Bootstrap ນຳໃຊ້ຮູບແບບ ແລະ ການຕັ້ງຄ່າທົ່ວໂລກທີ່ສຳຄັນຈຳນວນໜຶ່ງທີ່ເຈົ້າຈະຕ້ອງລະວັງໃນເວລາໃຊ້ມັນ, ເຊິ່ງທັງໝົດນີ້ເກືອບແມ່ນແນໃສ່ການເຮັດໃຫ້ ຮູບແບບ ຂອງຕົວທ່ອງເວັບຂ້າມຜ່ານ ປົກກະຕິ . ໃຫ້ dive ໃນ.
ປະເພດເອກະສານ HTML5
Bootstrap ຕ້ອງການໃຊ້ HTML5 doctype. ຖ້າບໍ່ມີມັນ, ທ່ານຈະເຫັນຄໍເຕົ້າໄຂ່ທີ່ທີ່ບໍ່ສົມບູນແບບທີ່ມ່ວນໆ, ແຕ່ລວມທັງມັນບໍ່ຄວນເຮັດໃຫ້ເກີດການຕົກໃຈຫຼາຍ.
<!doctype html>
<html lang="en">
...
</html>
ແທັກ meta ທີ່ຕອບສະ ໜອງ
Bootstrap ແມ່ນການພັດທະນາ ມືຖືທໍາອິດ , ຍຸດທະສາດທີ່ພວກເຮົາເພີ່ມປະສິດທິພາບລະຫັດສໍາລັບອຸປະກອນມືຖືກ່ອນແລະຫຼັງຈາກນັ້ນຂະຫຍາຍອົງປະກອບຕາມຄວາມຈໍາເປັນໂດຍໃຊ້ CSS media queries. ເພື່ອຮັບປະກັນການສະແດງຜົນ ແລະ ການຊູມສຳຜັດທີ່ເໝາະສົມສຳລັບອຸປະກອນທັງໝົດ, ໃຫ້ເພີ່ມແທັກ meta viewport ທີ່ຕອບສະໜອງ ໃຫ້ກັບ <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
ທ່ານສາມາດເບິ່ງຕົວຢ່າງຂອງການດໍາເນີນການນີ້ຢູ່ໃນ ແມ່ແບບເລີ່ມຕົ້ນ .
ຂະໜາດກ່ອງ
ສໍາລັບຂະຫນາດທີ່ກົງໄປກົງມາໃນ CSS, ພວກເຮົາປ່ຽນ ຄ່າ ທົ່ວໂລກ box-sizing
ຈາກ . ນີ້ຮັບປະກັນ ວ່າບໍ່ມີຜົນຕໍ່ຄວາມກວ້າງສຸດທ້າຍຂອງອົງປະກອບ, ແຕ່ມັນສາມາດເຮັດໃຫ້ເກີດບັນຫາກັບຊອບແວພາກສ່ວນທີສາມເຊັ່ນ Google Maps ແລະ Google Custom Search Engine.content-box
border-box
padding
ໃນໂອກາດທີ່ຫາຍາກ, ທ່ານຈໍາເປັນຕ້ອງໄດ້ລົບລ້າງມັນ, ໃຊ້ບາງສິ່ງບາງຢ່າງເຊັ່ນ: ຕໍ່ໄປນີ້:
.selector-for-some-widget {
box-sizing: content-box;
}
ດ້ວຍສະນິບເພັດຂ້າງເທິງ, ອົງປະກອບທີ່ຊ້ອນກັນ - ລວມທັງເນື້ອຫາທີ່ສ້າງຜ່ານ ::before
ແລະ - ::after
ທັງຫມົດຈະສືບທອດຕາມທີ່ລະບຸໄວ້ box-sizing
ສໍາລັບການນັ້ນ .selector-for-some-widget
.
ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ ຮູບແບບກ່ອງແລະຂະຫນາດຢູ່ທີ່ CSS Tricks .
ປິດເປີດໃໝ່
ສໍາລັບການປັບປຸງການສະແດງຜົນຂ້າມຕົວທ່ອງເວັບ, ພວກເຮົາໃຊ້ Reboot ເພື່ອແກ້ໄຂຄວາມບໍ່ສອດຄ່ອງໃນທົ່ວຕົວທ່ອງເວັບແລະອຸປະກອນໃນຂະນະທີ່ສະຫນອງຄວາມຄິດເຫັນເພີ່ມເຕີມເລັກນ້ອຍກັບອົງປະກອບ HTML ທົ່ວໄປ.
ຊຸມຊົນ
ຕິດຕາມການພັດທະນາຂອງ Bootstrap ແລະເຂົ້າເຖິງຊຸມຊົນດ້ວຍຊັບພະຍາກອນທີ່ເປັນປະໂຫຍດເຫຼົ່ານີ້.
- ອ່ານ ແລະສະໝັກໃຊ້ Blog Bootstrap ຢ່າງເປັນທາງການ .
- ສົນທະນາກັບເພື່ອນ Bootstrappers ໃນ IRC. ໃນ
irc.libera.chat
ເຄື່ອງແມ່ຂ່າຍ, ໃນ#bootstrap
ຊ່ອງທາງ. - ການຊ່ວຍເຫຼືອການຈັດຕັ້ງປະຕິບັດອາດຈະພົບເຫັນຢູ່ທີ່ Stack Overflow (tagged
bootstrap-5
). - ນັກພັດທະນາຄວນໃຊ້ຄໍາສໍາຄັນ
bootstrap
ໃນແພັກເກັດທີ່ດັດແປງຫຼືເພີ່ມການເຮັດວຽກຂອງ Bootstrap ເມື່ອແຈກຢາຍຜ່ານ npm ຫຼືກົນໄກການຈັດສົ່ງທີ່ຄ້າຍຄືກັນສໍາລັບການຄົ້ນພົບສູງສຸດ.
ນອກນັ້ນທ່ານຍັງສາມາດຕິດຕາມ @getbootstrap ໃນ Twitter ສໍາລັບວິດີໂອເພງນິນທາຫລ້າສຸດແລະຫນ້າຫວາດສຽວ.